<template>
  <div>
    <!-- 搜索 -->
    <a-row justify="space-between">
      <a-col :span="18">
        <a-form layout="inline" :module="searchFormData" :labelAlign="right">
          <a-form-item label="资源名称">
            <a-input v-model="searchFormData.resourceName"></a-input>
          </a-form-item>
          <a-form-item label="编码状态">
            <a-select style="width: 150px;" v-model="searchFormData.resourceStatus">
              <a-select-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label
                }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="资源负责人">
            <a-select style="width: 150px;" v-model="searchFormData.resourceOwner">
              <a-select-option v-for="(item, index) in ownerOptions" :key="index"
                :value="item.ownerName"></a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col>
        <a-button type="primary">
          <template #icon>
            <SearchOutlined />
          </template>搜索
        </a-button>
      </a-col>
      <a-col>
        <a-button>重置</a-button>
      </a-col>
    </a-row>
    <!-- 操作 -->
    <a-row style="margin: 20px 0;" justify="space-between">
      <a-col :span="20">
        <a-row :gutter="24" justify="left">
          <a-col :span="4">
            <a-button>导出(申请)</a-button>
          </a-col>
          <a-col :span="4">
            <a-button>导入(编码)</a-button>
          </a-col>
          <a-col :span="4">
            <a-button>批量删除</a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="testOpenModal">状态设置</a-button>
          </a-col>
        </a-row>
      </a-col>
      <a-col>
        <a-button type="primary" @click="openTabelModal">接口管理</a-button>
      </a-col>
    </a-row>
    <!-- 表格 -->
    <MyTable @rowSelection="rowSelection" :rowKey="rowKey" :columns="tableColumns" :tableData="tableData">
    </MyTable>
    <!-- 弹窗 -->
    <!-- 查看及编辑 -->
    <a-modal :title="modalTitle" v-model:open="isShowModal" @ok="submit">
      <a-form :disabled="isChecked" :model="modalData" :labelAlign="right" :label-col="{ span: 6 }">
        <a-form-item label="资源名称">
          <a-input v-model:value="modalData.resourceName"></a-input>
        </a-form-item>
        <a-form-item label="资源分类代码">
          <a-input v-model:value="modalData.resourceTypeCode"></a-input>
        </a-form-item>
        <a-form-item label="资源编码">
          <a-input v-model:value="modalData.resourceCode"></a-input>
        </a-form-item>
        <a-form-item label="资源负责人">
          <a-input v-model:value="modalData.resourceOwner"></a-input>
        </a-form-item>
        <a-form-item label="编码状态">
          <a-input v-model:value="modalData.codeStatus"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 状态设置 -->
    <MyModal @afterOk="afterOk" @afterCancel="afterCancel" :testContent2="testContent2" :title="testTitle"
      :isShowModal="testIsShowModal">
    </MyModal>
    <!-- 表格弹窗 -->
    <a-modal v-model:open="isShowTableModal" title="接口管理" style="width: 80%;">
      <!-- <a-row>
        <a-col> -->
      <a-form layout="inline" :model="tableModalSearchForm">
        <a-form-item label="接口名称">
          <a-input style="width: 150px;" v-model="tableModalSearchForm.acceptName"></a-input>
        </a-form-item>
        <a-form-item label="接口类型">
          <a-select style="width: 150px;" v-model="tableModalSearchForm.acceptType">
            <a-select-option v-for="(item, index) in acceptTypeOptions" :key="index" :value="item.value">{{
              item.label
            }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="使用状态">
          <a-select style="width: 150px;" v-model="tableModalSearchForm.useStatus">
            <a-select-option v-for="(item, index) in useStatusOptions" :key="index" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="创建人">
          <a-input style="width: 150px;" v-model="tableModalSearchForm.creater"></a-input>
        </a-form-item>
        <a-form-item label="创建时间">
          <a-date-picker :locale="locale" v-model="tableModalSearchForm.createTime"></a-date-picker>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button>重置</a-button>
        </a-form-item>
      </a-form>
      <!-- </a-col>
      </a-row> -->
      <a-row style="margin: 20px 0;">
        <a-col :span="2">
          <a-button type="primary" @click="addAccept">
            <PlusOutlined />添加
          </a-button>
        </a-col>
        <a-col>
          <a-button>批量删除</a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <Mytable :columns="tabelModalColumns" :tableData="tableModalData"></Mytable>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, inject } from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import {
  SearchOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'
import Mytable from '../components/mytable.vue'
import { message } from 'ant-design-vue'

const testTitle = '接口管理'
const testIsShowModal = ref(false)

const testContent2 = ref({
  isShowModal: false,
  title: '状态设置',
  contentList: [
    {
      id: 1,
      type: 'form',
      isCheck: false,
      rules: {
        codeStatus: [
          { required: true, message: '请输入编码状态', trigger: 'blur' }
        ]
      },
      bindData: {
        codeStatus: '测试'
      },
      contentItemList: [
        {
          type: 'select',
          key: 'codeStatus',
          label: '编码状态',
          options: [
            {
              label: '待申请',
              value: '待申请'
            },
            {
              label: '已申请',
              value: '已申请'
            },
            {
              label: '已编码',
              value: '已编码'
            },
          ]
        }
      ]
    },
  ]
})

// 点击确定后
const afterOk = () => {
  testContent2.value.isShowModal = false
}

// 点击取消后
const afterCancel = () => {
  testContent2.value.isShowModal = false
}

// 状态设置
const testOpenModal = () => {
  testContent2.value.isShowModal = true
}

// 搜索框表单
const searchFormData = ref({
  resourceStatus: ''
})
// 编码状态选项
const options = [
  {
    label: '待编码',
    value: '待编码'
  },
  {
    label: '编码中',
    value: '编码中'
  },
  {
    label: '已编码',
    value: '已编码'
  },
]

// 负责人选项
const ownerOptions = [
  {
    ownerName: '张三'
  },
  {
    ownerName: '里斯'
  },
  {
    ownerName: '王五'
  }
]

// 表格数据key
const rowKey = 'id'

// 表格数据
const tableData = ref([
  {
    id: '111111',
    resourceName: 'xxxxxxxxxxxxxxxxxxx',
    resourceTypeCode: 'xxxx',
    resourceTypeName: 'xxxx',
    resourceCode: 'xxxx',
    codeStatus: '待申请',
    resourceOwner: '张三',
    resourceUplpader: 'xxxx',
    uploadTime: '2018-09-09 14:00:00',
  }
])

// 表格列
const tableColumns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    customRender: ({ text, record, index }) => `${index + 1}`,
    align: 'center',
  },
  {
    title: '资源名称',
    dataIndex: 'resourceName',
    key: 'resourceName',
    align: 'center'
  },
  {
    title: '资源分类代码',
    dataIndex: 'resourceTypeCode',
    key: 'resourceTypeCode',
    align: 'center'
  },
  {
    title: '资源分类名称',
    dataIndex: 'resourceTypeName',
    key: 'resourceTypeName',
    align: 'center'
  },
  {
    title: '资源编码',
    dataIndex: 'resourceCode',
    key: 'resourceCode',
    align: 'center'
  },
  {
    title: '编码状态',
    dataIndex: 'codeStatus',
    key: 'codeStatus',
    align: 'center'
  },
  {
    title: '资源负责人',
    dataIndex: 'resourceOwner',
    key: 'resourceOwner',
    align: 'center'
  },
  {
    title: '维护人',
    dataIndex: 'resourceUplpader',
    key: 'resourceUplpader',
    align: 'center'
  },
  {
    title: '维护日期',
    dataIndex: 'uploadTime',
    key: 'uploadTime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: '操作',
    align: 'center',
    btnArr: [
      {
        label: '查看',
        activeIsShow: true,
        onClick: ({ column, record }) => {
          modalTitle.value = '查看'
          modalData.value = record
          isChecked.value = true
          isShowModal.value = true
        }
      },
      {
        label: '编辑',
        activeIsShow: true,
        onClick: ({ record }) => {
          modalTitle.value = '编辑'
          isChecked.value = false
          modalData.value = record
          isShowModal.value = true
        }
      },
      {
        label: '状态',
        activeIsShow: true,
        onClick: ({ record }) => {
          console.log('codeStatus', record.codeStatus)
        }
      }
    ]
  },

]

// 是否展示弹窗
const isShowModal = ref(false)
// 弹窗表单数据
const modalData = ref({})
// 弹窗标题
const modalTitle = ref('')
// 是否不允许编辑
const isChecked = ref(true)
// 弹窗点击确定
const submit = () => {
  isShowModal.value = false
}

// 是否展示表格弹窗
const isShowTableModal = ref(false)
// 弹窗表格搜索表单
const tableModalSearchForm = ref({})
// 接口类型options
const acceptTypeOptions = [
  {
    label: "全部",
    value: ''
  }
]
// 使用状态options
const useStatusOptions = [
  {
    label: '全部',
    value: ''
  }
]
// 表格弹窗列数据
const tabelModalColumns = [
  {
    title: '接口名称',
    dataIndex: 'acceptName',
    key: 'acceptName',
    align: 'center'
  },
  {
    title: '接口类型',
    dataIndex: 'acceptType',
    key: 'acceptType',
    align: 'center'
  },
  {
    title: '服务器名',
    dataIndex: 'serviceName',
    key: 'serviceName',
    align: 'center'
  },
  {
    title: '端口',
    dataIndex: 'sport',
    key: 'sport',
    align: 'center'
  },
  {
    title: '使用状态',
    dataIndex: 'useStatus',
    key: 'useStatus',
    align: 'center'
  },
  {
    title: '维护人',
    dataIndex: 'resourceUplpader',
    key: 'resourceUplpader',
    align: 'center'
  },
  {
    title: '维护时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: '操作',
    align: 'center',
    btnArr: [
      {
        label: '启用',
        activeIsShow: ({ record }) => {
          return record.useStatus === '停用'
        },
        onClick: ({ record }) => {
          record.useStatus = '启用'
        }
      },
      {
        label: "停用",
        activeIsShow: ({ record }) => {
          return record.useStatus === '启用'
        },
        onClick: ({ record }) => {
          record.useStatus = '停用'
        }
      },
      {
        label: '查看',
        activeIsShow: true,
        onClick: ({ record }) => {
          testContent2.value = {
            title: '查看',
            isShowModal: true,
            contentList: [
              {
                type: 'form',
                isCheck: true,
                rules: {
                  acceptName: [
                    { required: true, message: '请输入接口名称', trigger: 'blur' }
                  ],
                  acceptType: [
                    { required: true, message: "请选择接口类型", tirgger: 'blur' }
                  ],
                  serviceName: [
                    { required: true, message: "请输入服务器名", tirgger: 'blur' }
                  ],
                  sport: [
                    { required: true, message: "请输入端口", tirgger: 'blur' }
                  ],
                  acceptAddress: [
                    { required: true, message: "请输入接口地址", tirgger: 'blur' }
                  ],
                  acceptParams: [
                    { required: true, message: "请选择接口参数", tirgger: 'blur' }
                  ]
                },
                bindData: record,
                contentItemList: [
                  {
                    type: 'input',
                    key: 'acceptName',
                    label: '接口名称'
                  },
                  {
                    type: 'select',
                    key: 'acceptType',
                    label: '接口类型',
                    options: [
                      {
                        label: "GET",
                        value: 'GET'
                      },
                      {
                        label: "PUSH",
                        value: "PUSH"
                      }
                    ]
                  },
                  {
                    type: 'input',
                    key: 'serviceName',
                    label: '服务器名'
                  },
                  {
                    type: 'input',
                    key: "sport",
                    label: '端口'
                  },
                  {
                    type: 'input',
                    key: "acceptAddress",
                    label: '接口地址'
                  },
                  {
                    type: 'textarea',
                    key: "acceptParams",
                    label: '接口参数'
                  },
                  {
                    type: 'input',
                    key: 'userId',
                    label: '身份认证'
                  }
                ]
              }
            ]
          }
        }
      },
      {
        label: '编辑',
        activeIsShow: true,
        onClick: ({ record }) => {
          testContent2.value = {
            title: '编辑',
            isShowModal: true,
            contentList: [
              {
                type: 'form',
                isCheck: false,
                rules: {
                  acceptName: [
                    { required: true, message: '请输入接口名称', trigger: 'blur' }
                  ],
                  acceptType: [
                    { required: true, message: "请选择接口类型", tirgger: 'blur' }
                  ],
                  serviceName: [
                    { required: true, message: "请输入服务器名", tirgger: 'blur' }
                  ],
                  sport: [
                    { required: true, message: "请输入端口", tirgger: 'blur' }
                  ],
                  acceptAddress: [
                    { required: true, message: "请输入接口地址", tirgger: 'blur' }
                  ],
                  acceptParams: [
                    { required: true, message: "请选择接口参数", tirgger: 'blur' }
                  ]
                },
                bindData: record,
                contentItemList: [
                  {
                    type: 'input',
                    key: 'acceptName',
                    label: '接口名称'
                  },
                  {
                    type: 'select',
                    key: 'acceptType',
                    label: '接口类型',
                    options: [
                      {
                        label: "GET",
                        value: 'GET'
                      },
                      {
                        label: "PUSH",
                        value: "PUSH"
                      }
                    ]
                  },
                  {
                    type: 'input',
                    key: 'serviceName',
                    label: '服务器名'
                  },
                  {
                    type: 'input',
                    key: "sport",
                    label: '端口'
                  },
                  {
                    type: 'input',
                    key: "acceptAddress",
                    label: '接口地址'
                  },
                  {
                    type: 'textarea',
                    key: "acceptParams",
                    label: '接口参数'
                  },
                  {
                    type: 'button',
                    text: "校验",
                    label: '',
                    onClick: () => {
                      console.log(record, 'record----------------')
                    }
                  },
                  {
                    type: 'input',
                    key: 'userId',
                    label: '身份认证'
                  }
                ]
              }
            ]
          }
        }
      },
      {
        label: '删除',
        activeIsShow: true,
        onClick: ({ record }) => {
          testContent2.value = {
            title: '删除',
            isShowModal: true,
            contentList: [
              {
                type: 'text',
                label: '删除',
                text: '确认要删除选中的数据？记录删除后将无法恢复！'
              }
            ]
          }
        }
      },
      {
        label: '调用',
        activeIsShow: ({ record }) => {
          return record.useStatus === '启用'
        },
        onClick: ({ record }) => {
          console.log(record, '调用-----------------')
        }
      }
    ]
  },
]

// 表格弹窗数据
const tableModalData = ref([
  {
    acceptName: '接口1',
    acceptType: 'GET',
    serviceName: '火灾监控',
    sport: 'XXXXX',
    useStatus: '停用',
    resourceUplpader: "赵丽",
    uploadTime: '2016-09-21  08:50:08'
  }
])

// 接口管理-新增
const addAccept = () => {
  testContent2.value = {
    title: '新增',
    isShowModal: true,
    contentList: [
      {
        type: 'form',
        isCheck: false,
        rules: {
          acceptName: [
            { required: true, message: '请输入接口名称', trigger: 'blur' }
          ],
          acceptType: [
            { required: true, message: "请选择接口类型", tirgger: 'blur' }
          ],
          serviceName: [
            { required: true, message: "请输入服务器名", tirgger: 'blur' }
          ],
          sport: [
            { required: true, message: "请输入端口", tirgger: 'blur' }
          ],
          acceptAddress: [
            { required: true, message: "请输入接口地址", tirgger: 'blur' }
          ],
          acceptParams: [
            { required: true, message: "请选择接口参数", tirgger: 'blur' }
          ]
        },
        bindData: {},
        contentItemList: [
          {
            type: 'input',
            key: 'acceptName',
            label: '接口名称'
          },
          {
            type: 'select',
            key: 'acceptType',
            label: '接口类型',
            options: [
              {
                label: "GET",
                value: 'GET'
              },
              {
                label: "PUSH",
                value: "PUSH"
              }
            ]
          },
          {
            type: 'input',
            key: 'serviceName',
            label: '服务器名'
          },
          {
            type: 'input',
            key: "sport",
            label: '端口'
          },
          {
            type: 'input',
            key: "acceptAddress",
            label: '接口地址'
          },
          {
            type: 'textarea',
            key: "acceptParams",
            label: '接口参数'
          },
          {
            type: 'button',
            text: "校验",
            label: " ",
            onClick: () => {
              console.log(testContent2.value)
            }
          },
          {
            type: 'input',
            key: 'userId',
            label: '身份认证'
          },
          {
            type: "textarea",
            key: "validateMessage",
            label: '校验信息'
          }
        ]
      }
    ]
  }
}

// 接口管理-表格弹窗
const openTabelModal = () => {
  isShowTableModal.value = true
}

// 表格选择
const rowSelection = ({ selectedRowKeys, selectedRows }) => {
  console.log(selectedRowKeys, selectedRows, 'selectedRowKeys, selectedRows------------')
}
</script>
<style scoped lang="less"></style>
